<template>
  <video class="video-paly" ref="videoPlay" :controls="controls" :loop="loop" autoplay muted disablePictureInPicture crossorigin="anonymous"></video>
</template>

<script>
import ZLMRTCClient from "../..//utils/ZLMRTCClient.js";
export default {
  props: {
    controls: {
      type: Boolean,
      default: false
    },
    loop: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    //webrtc直播
    playVideo(url) {
      this.close();
      let playDom = this.$refs.videoPlay;
      let width = window.screen.width * window.devicePixelRatio;
      let height = window.screen.height * window.devicePixelRatio;
      this.webrtcPlayer = new ZLMRTCClient.Endpoint({
        element: playDom,// video 标签
        debug: false,// 是否打印日志
        zlmsdpUrl: url,//流地址
        // audioEnable: true,
        // videoEnable: true,
        recvOnly: true,
        resolution: {//设置分辨率
          w: width,
          h: height,
        }
      });
      //监听获取流数据
      this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, evt => {
        console.log('播放成功')
      });
    },
    close() {
      if(this.webrtcPlayer) {
        this.webrtcPlayer.close();
        this.webrtcPlayer = null;
      }
    }
  }
}
</script>
<style scoped>
.video-paly {
  width: 100%;
  height: 100%;
}
</style>